import 'package:dala_flutter/dala/components/full_screen_image.dart';
import 'package:flutter/material.dart';

/*
  使用overlay的步骤：
  1、获取overlayState
  2、创建overlayEntry
  3、插入overlayEntry
  4、更新或者移除overlayEntry
  5、处理overlay中的交互
*/
class FullScreenImageOverlay extends StatefulWidget {
  final EdgeInsetsGeometry? margin;
  final double? height;
  final BorderRadiusGeometry? borderRadius;
  final String url;
  final VoidCallback? onPressed;
  final BoxFit? fit;
  final List listImageUrl; // 图片数组

  const FullScreenImageOverlay({
    super.key,
    this.margin,
    this.height,
    this.borderRadius,
    required this.url,
    this.onPressed,
    this.fit,
    required this.listImageUrl,
  });

  @override
  State<FullScreenImageOverlay> createState() => _FullScreenImageOverlayState();
}

class _FullScreenImageOverlayState extends State<FullScreenImageOverlay> {
  // overlay状态
  OverlayState? _overlayState;

  // overlay入口
  OverlayEntry? _overlayEntry;

  @override
  void initState() {
    // 1、获取overlayState
    _overlayState = Overlay.of(context);
    super.initState();
  }

  // 移除overlay
  void _hideOverlay() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }

  // 显示overlay
  void _showFullScreenImage() {
    // 2、创建overlayEntry
    _overlayEntry = OverlayEntry(builder: (BuildContext context) {
      return FullScreenImage(hideOverlay: _hideOverlay, listImageUrl: widget.listImageUrl,);
    });
    // 3、插入overlayEntry
    _overlayState?.insert(_overlayEntry!);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _showFullScreenImage,
      child: Container(
        margin: widget.margin ?? const EdgeInsets.all(0),
        height: widget.height ?? 180,
        decoration: BoxDecoration(
          borderRadius: widget.borderRadius ?? BorderRadius.circular(20),
          image: DecorationImage(
            image: NetworkImage(
              widget.url,
            ),
            fit: widget.fit ?? BoxFit.cover,
          ),
        ),
      ),
    );
  }
}
